import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Button, Table, Pagination, Modal, message } from 'antd';
import moment from 'moment';
import styles from './index.less';
import { routerRedux } from 'dva/router';


const confirm = Modal.confirm;


@connect(({ process, loading }) => ({
  process,
  loading: loading.effects['process/fetch'],
}))

class ProcessTemplate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      limit: 10,
      currentTemplateId: null,
      visible: false,
    };
    this.columns = [
      {
        key: 'name',
        align: 'left',
        title: '模版名称',
        dataIndex: 'name',
      },
      {
        align: 'left',
        key: 'addTime',
        title: '添加时间',
        dataIndex: 'addTime',
        render: (dataIndex) => {
          return moment(dataIndex).format('YYYY-MM-DD HH:mm:ss');
        },
        width: '300px',
      },
      {
        title: '操作',
        align: 'left',
        render: (text, row) => {
          return <div>
            <Button type="primary" htmlType='button' size='small' className={styles.processBtn} onClick={() => this.viewProcessById(row)}>
              <FormattedMessage
                id="app.processTemplate.btn-see"
              />
            </Button>
            <Button htmlType='button' size='small' className={styles.processBtn} onClick={() => this.editProcessById(row)}>
              <FormattedMessage
                id="app.processTemplate.btn-edit"
              />
            </Button>
            <Button type="danger" htmlType='button' size='small' className={styles.processBtn} onClick={() => this.delProcessById(row)}>
              <FormattedMessage
                id="app.processTemplate.btn-del"
              />
            </Button>
          </div>;
        },
        width: '300px',
      },
    ];

  }


  componentDidMount() {
    this.fetchProcessListById()
  }

  fetchProcessListById() {
    const that = this;
    const newPage = that.state.page;
    const newLimit = that.state.limit;
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'process/fetch',
        payload: { robotId: currentUser.robotId, page: newPage, limit: newLimit },
      });
    });
  }

  delProcessListById() {
    const that = this;
    const { dispatch, currentUser } = that.props;
    that.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'process/delete',
        payload: { robotId: currentUser.robotId, induceId: that.state.currentTemplateId },
        callback: (res) => {
          if (res.msg) {
            message.info(res.msg);
            that.fetchProcessListById()
          }
        }
      });
    });
  }

  seeProcessDetailById(id){
    const that = this;
    const { dispatch } = that.props;
    that.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'process/see',
        payload: { induceId: that.state.currentTemplateId },
        callback: (res)=>{
          console.log(res)
        }
      });
    });
  }

  viewProcessById(row) {
    console.log(row._id, '查看-id-');
    this.setState({
      visible: true,
      currentTemplateId: row._id
    },()=>{
      this.seeProcessDetailById()
    });
  }

  editProcessById(row) {
    console.log(row._id, '编辑-id-');
  }

  delProcessById(row) {
    const that = this;
    that.setState({
      currentTemplateId: row._id
    }, () => {
      confirm({
        title: '删除任务',
        content: '确认删除该引导模版吗？',
        okText: '确认',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          that.delProcessListById()
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    })
  }

  handleOk = (e) => {
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  };

  addTemplate() {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/basic/processTemplate/edit'));

    // const w = window.open('about:blank');
    // w.location.href = 'http://localhost:8000/basic/customDictionary'
  }

  // 翻页
  fanye(e) {
    this.setState({
      page: e,
    }, () => {
      this.fetchProcessListById();
    });
  }

  render() {
    const { process, loading } = this.props;
    const {
      items,
      total,
    } = process;
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Row className={styles.colorBackground}>
            <Col style={{ padding: 10 }} xs={24}>
              <div className={styles.title}>
                <FormattedMessage
                  id="app.processTemplate.title"
                />
              </div>
            </Col>
          </Row>
          <Card
            bordered={false}
          >
            <div>
              <Button type="primary" icon="plus" htmlType="button" onClick={() => this.addTemplate()}>
                <FormattedMessage id="app.processTemplate.add" />
              </Button>
              <Button icon="edit" htmlType="button" style={{ marginLeft: '10px' }}>
                <FormattedMessage id="app.processTemplate.edit" />
              </Button>
            </div>
            <Table
              rowKey="_id"
              dataSource={items}
              columns={this.columns}
              style={{ marginTop: '10px' }}
              pagination={false}
              algin="center"
            />
            <Pagination
              total={total}
              onChange={e => this.fanye(e)}
              style={{ float: 'right', marginTop: '10px' }}
            />
            <Modal
              title="查看模板"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
            </Modal>
          </Card>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser
}))(ProcessTemplate);
